<template>
    <div class="back">
        <div class="form">
            <el-form class="outback">
                <div>
                    <img src="../images/com.jpg" id="picture">
                </div>
                <p></p>
                <div class="trademark">
                    <a>慧链计算机有限公司</a>
                </div>
                <div class="trademark">
                    <a>产业供应链管理系统</a>
                </div>
            <el-form ref="form" :model="userinfo" label-width="80px" class="infobox">
                <h1 id="apex">登录</h1>
                <el-form-item label="账号" prop="username">
                    <el-input placeholder="请输入账号" v-model="userinfo.username" suffix-icon="el-icon-user" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" v-model="userinfo.password" show-password ></el-input>
                </el-form-item>
                <el-form-item id="options">
                    <el-button type="primary" @click="handleLogin()">登录</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LoginView",
        data() {
            return {
                userinfo: {
                    username: "",
                    password: ""
                }
            }
        },
        methods: {
            handleLogin() {
                console.log("login....");
                //axios
                this.$axios.post("manage/login", this.userinfo)
                    .then(response => {
                        console.log(response.data);
                        if (response.data.code == 10001) {
                            this.$message.error("用户名不能为空");
                            return;
                        }
                        if (response.data.code == 10003) {
                            this.$message.error("密码不能为空");
                            return;
                        }
                        if (response.data.code == 10004) {
                            this.$message.error("用户名或者密码错误，请重新登录");
                            return;
                        }
                        window.localStorage.setItem("token", response.data.token);
                        window.localStorage.setItem("form", JSON.stringify(response.data.admin));
                        this.$router.push("/manage");
                    })
            }
        }
    }
</script>

<style scoped>
    /* 整体页面背景设置为浅灰色，营造简洁干净的氛围 */
    body {
        position: relative;
        min-height: 100vh;
        margin: 0;
        background-color: #f4f4f4;

    }

    #picture{
        max-width: 200px;
        margin-left: 80px;
        margin-top: 60px;
        border-radius: 100px;
    }

    .trademark{
        margin-left: 60px;
        font-size: 30px;
    }


    /* 登录表单的外层容器样式，添加一些内边距和边框圆角，使其更具立体感 */
    .form {
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /* 登录标题样式，设置字体大小、颜色和加粗效果，使其更加突出 */
    #apex {
        text-align: center;
        font-size: 24px;
        color: #333;
        font-weight: bold;

        /*background: linear-gradient(to bottom, blue, red);*/
    }
    .outback{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 55%;
        height: 50%;
        //background: linear-gradient(to bottom right,#dcdfe6 , #00aaff,greenyellow,orangered);
        background: linear-gradient(to bottom right,#00aaff,#dcdfe6 , #00aaff);
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        opacity: 95%;

    }

    /* 表单盒子样式，设置背景色为白色，增加一些内边距，使输入框和按钮布局更合理 */
    .infobox {
        position: absolute;
        top: 50%;
        left:70%;
        transform: translate(-50%, -50%);
        width: 35%;
        height: 50%;
        /*background: linear-gradient(to bottom right, #ff00ff, #00ffff);*/
        background-color: white;
        padding: 30px;
        border-radius: 10%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    }

    /* 表单标签样式，设置字体大小和颜色，使其更加清晰易读 */
    label {
        font-size: 16px;
        color: #555;
    }

    /* 输入框样式，设置边框、内边距、圆角等，使其外观更加美观统一 */
    el-input {
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
        width: 100%;
        background: linear-gradient(to bottom, blue, red);
    }

    /* 输入框获得焦点时的样式，改变边框颜色以突出显示 */
    el-input:focus {
        border-color: #007bff;
        outline: none;
        /* 焦点时的渐变背景 */
        background: linear-gradient(to bottom, #ffffff, red);
    }

    /* 登录和取消按钮的容器样式，设置为弹性布局，以便按钮能水平排列并居中 */
    #options {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    /* 登录按钮样式，设置背景色、字体颜色、边框圆角等，使其具有明显的可点击性 */
    el-button[type="primary"] {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
    }

    /* 登录按钮悬停时的样式，稍微加深背景色以提供交互反馈 */
    el-button[type="primary"]:hover {
        background-color: #0056b3;
    }

    /* 取消按钮样式，设置背景色为浅灰色，字体颜色为深灰色，使其与登录按钮区分开来 */
    el-button:not([type="primary"]) {
        background-color: #f0f0f0;
        color: #333;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    /* 取消按钮悬停时的样式，稍微改变背景色以提供交互反馈 */
    el-button:not([type="primary"]):hover {
        background-color: #e0e0e0;
    }
</style>